<template>
  <div class="shopping-cart">
    <el-row>
      <el-col :push="20"  :span="2">    
        <el-button type="primary" style="margin-left: 16px" @click="drawer1 = true">选择商家</el-button>
      </el-col>


      <el-col :push="20"  :span="2">    
        <el-button type="primary" style="margin-left: 16px" @click="drawer = true">使用优惠卷</el-button>
      </el-col>
      <el-col   :span="2">
      
        <el-form-item label="备注">
        <el-input  v-model="AddCommodityForm.remark"></el-input>
      </el-form-item>
     
      </el-col>
    </el-row>
  
    <!-- 商品列表 -->
    <el-table ref="table" :data="ProductList" style="width: 100%" v-if="ProductList.length"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="productId" label="商品ID"></el-table-column>
      <el-table-column prop="productName" label="商品名称"></el-table-column>
      <el-table-column prop="productPrice" label="单价">
        <template #default="scope">
          {{ scope.row.productPrice }} 元
        </template>
      </el-table-column>
      <el-table-column prop="typeName" label="类型名称"></el-table-column>
      <!-- <el-table-column prop="number" label="库存数量">
        <template #default="scope">
          {{ scope.row.number }}
        </template>
      </el-table-column> -->
      <el-table-column prop="describe" label="描述"></el-table-column>
      <el-table-column prop="picture" label="图片">
        <template #default="scope">
          <img :src="scope.row.picture" alt="Product Image" class="product-image" />
        </template>
      </el-table-column>
      <el-table-column prop="purchaseNumber" label="购买数量">
        <!-- <template #default="scope">
          <el-input-number v-model="scope.row.purchaseNumber" @change="handleChange(scope.row)" :min="1" size="small"></el-input-number>
        </template> -->
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>

      
        </template>
      </el-table-column>
    </el-table>
    <p v-else>购物车为空。</p>





    <el-drawer v-model="drawer" title="优惠卷" size="50%">


      <el-table 
      ref="table"
       :data="lists"
       >
       <!-- <el-table-column prop="couponId" label="ID" width="200px"></el-table-column> -->
       <el-table-column prop="title" label="优惠券名称" style="width: 150px;"></el-table-column>
       <el-table-column prop="startDate" label="优惠券开始时间" style="width: 150px;"></el-table-column>
       <el-table-column prop="endDate" label="结束时间" style="width: 150px;"></el-table-column>
       <el-table-column prop="minSpend"   label="最低消费及折扣"   style="width: 100px;">
        <template v-slot="scope">
              {{scope.row.minSpend > 0 ? scope.row.minSpend+'元' : scope.row.discount+'折' }} 
            </template>
       </el-table-column>
       <el-table-column label="优惠券图片"style="width: 100px;">
  <template v-slot="scope">
    <img :src="scope.row.couponImage" class="cover-image"  style="width: 100px; height: 100px;">
  </template>
</el-table-column>


<el-table-column prop="type" label="类型" style="width: 100px;">
        <template v-slot="scope">
              {{scope.row.type==0?'满减':'折扣'}}
            </template>
       </el-table-column>

<el-table-column prop="description" label="描述" width="150px"></el-table-column>
       <el-table-column
                label="操作"
                width="150px"
                align="center">
                <template #default="scope">
           
                <el-button type="primary" @click="addcoupons(scope.row.couponId)"  round>使用</el-button>
              </template>
              </el-table-column>
  </el-table>



  </el-drawer>





  <el-drawer v-model="drawer1" title="商家" size="50%">

    <el-table :data="ShopInfoList" style="width: 100%">

      <!-- 店铺头像 -->
      <el-table-column label="店铺头像" width="80">
        <template #default="scope">
          <img :src="scope.row.shopImage" alt="Shop Image" class="shop-image" style="width: 80px; height: 80px;"/>
        </template>
      </el-table-column>
    

      <!-- 店铺名称 -->
      <el-table-column prop="shopName" label="商家名称" min-width="120"></el-table-column>

      <!-- 店铺地址(经纬度) -->
      <el-table-column prop="shopAddress" label="商家地址" min-width="150"></el-table-column>

      <!-- 店铺电话 -->
      <el-table-column prop="shopPhone" label="商家电话" width="120"></el-table-column>

      <!-- 店铺营业时间 -->
      <el-table-column prop="businessHours" label="营业时间" min-width="120"></el-table-column>

      

      <!-- 图片详情json -->
      <el-table-column prop="shopPoto" label="图片详情" min-width="150" style="height: 50px; width: 50px;"></el-table-column>

      <!-- 店铺描述 -->
      <el-table-column prop="shopDescription" label="店铺描述" min-width="200"></el-table-column>

      <!-- 店铺服务范围描述 -->
      <el-table-column prop="serviceDescription" label="服务范围描述" min-width="200"></el-table-column>


      <!-- 店铺评分 -->
      <el-table-column prop="shopIntegral" label="店铺评分" width="90"></el-table-column>



      <el-table-column prop="description" label="描述" width="150px"></el-table-column>
       <el-table-column
                label="操作"
                width="150px"
                align="center">
                <template #default="scope">
           
                <el-button type="primary" @click="addshop(scope.row)"  round>选择</el-button>
              </template>
              </el-table-column>

    </el-table>





    <!-- 分页组件 -->
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      :page-size="pagination.pageSize"
      :current-page="pagination.pageNum"
      :page-sizes="[5, 10, 20, 50]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 20px;"
    ></el-pagination>
    


  </el-drawer>



    <!-- 分页 -->
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      :page-size="pagination.pageSize"
      :current-page="pagination.pageNum"
      :page-sizes="[5, 10, 20, 50]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 20px;"
    ></el-pagination>


  
    <!-- 提交订单按钮 -->
    <el-button type="primary" @click="placeOrder" style="margin-top: 20px;">提交订单</el-button>
  </div>
</template>

<script>
export default {
  name: 'ShoppingCart',
  data() {
    return {
      ProductList: [],
      pagination: {
        total: 0,
        pages: 1,
        pageNum: 1,
        pageSize: 20,
      },
      PageForm:{
        pageNum: 1,
        pageSize: 20,
      },
      FindShoppingCarForm: {
        pageForm: {
          pageNo: 1,
          pageSize: 20,
        }
      },
      AddCommodityForm: {
        productDto: [
      {
      productId: 0,
      purchaseNumber: 0
      }
      ], // 存储多个商品信息
        addressInfo: '', // 地址信息
        receiverName: '', // 收货人姓名
        receiverPhone: '', // 联系电话
        couponId: '', // 优惠券ID
        remark: '', // 备注
        shopId: '', // 商家ID

      },
      drawer: false,
      drawer1:false,
      SelectUserCouponsForm:{

      },
      lists:[],
      ShopInfoList:[],
      DeleteShoppingCarForm:{
        productId:"",
        userId:0,
      }
    };
  },
  methods: {

    // handleDelete(obj){
    //   this.DeleteShoppingCarForm.productId=obj.productId
    //   console.log(obj.productId)
    //   this.$http.delete("/product/productTable/deleteShoppingCarByProductId",this.DeleteShoppingCarForm).then(resp => {
    //     if(resp.data.code === 200){
    //       alert(resp.data.message)
    //     }
         
    //     })

    // },
    addshop(obj){
      this.AddCommodityForm.addressInfo=obj.shopAddress,
      this.AddCommodityForm.receiverName=obj.shopName,
      this.AddCommodityForm.receiverPhone=obj.shopPhone,
      this.AddCommodityForm.shopId=obj.shopId
      this.drawer1=false

    },
    getShopInfoList(){
      this.$http.post("/market/shopInfo/getShopInfoList",this.PageForm).then(resp => {
          this.ShopInfoList=resp.data.data.list
        })


    },


    addcoupons(obj) {
      this.AddCommodityForm.couponId = obj;
      this.drawer = false;
    },

    fuserCoupons(){
      this.$http.get("/coupons/userCoupons/selectusercoupons",this.SelectUserCouponsForm).then(resp => {
          this.lists=resp.data.data.records
        })
  
    },


    getProductList() {
      this.$http.get("/product/productTable/findAllShoppingCarByUserId",this.FindShoppingCarForm )
        .then(resp => {
          if (resp.data.code === 200) {
            const data = resp.data.data;
            this.ProductList = data.list.map(item => ({ ...item, purchaseNumber: item.number }));
            Object.assign(this.pagination, data);
            console.log('Updated Product List:', this.ProductList);
          } else {
            this.$message.error(resp.data.message || '获取商品列表失败');
          }
        })
        .catch(error => {
          console.error('获取商品列表失败:', error);
          this.$message.error('服务器错误，请稍后再试');
        });
    },
    handleDelete(row) {
      const index = this.ProductList.indexOf(row);
      if (index > -1) {
        this.ProductList.splice(index, 1);
        this.$message.success('删除成功');
      }
    },


    handleSelectionChange(selectedRows) {
      this.AddCommodityForm.productDto = selectedRows.map(item => ({
        productId: item.productId,
        purchaseNumber: item.purchaseNumber
      }));
      console.log(this.AddCommodityForm.productDto);
    },



    placeOrder() {
      if (this.AddCommodityForm.productDto.length === 0) {
        this.$message.warning('请至少选择一项商品');
        return;
      }

      // 检查表单是否完整
      if (!this.AddCommodityForm.addressInfo || !this.AddCommodityForm.receiverName || !this.AddCommodityForm.receiverPhone) {
        this.$message.warning('请填写完整的订单信息');
        return;
      }
      console.log(this.AddCommodityForm);
        // 实际API调用逻辑
        this.$http.post('/order/commodity/insertcommodity',this.AddCommodityForm).then(resp => {
          if (resp.data.code === 200) {
            this.$message({
              type: 'success',
              message: '订单提交成功!'
            });
            this.getProductList();
          } else {
            this.$message.error(resp.data.message || '订单提交失败');
          }
        })
    },
    handleSizeChange(newSize) {
      this.pagination.pageSize = newSize;
      this.FindShoppingCarForm.pageForm.pageSize = newSize;
      this.getProductList();
    },
    handleCurrentChange(newPage) {
      this.pagination.pageNum = newPage;
      this.FindShoppingCarForm.pageForm.pageNo = newPage;
      this.getProductList();
    }
  },
  created() {
    this.getProductList();
    this.fuserCoupons();
    this.getShopInfoList();
  }
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
.shopping-cart {
  margin: 20px;
}

.el-table {
  margin-bottom: 20px;
}

.product-image {
  width: 50px; /* 可以根据实际情况调整大小 */
  height: auto;
}

.el-message-box {
  width: 30%; /* 调整弹出框宽度 */
}
</style>